<template>
  <div class="tab-title-page p_list">
    <el-tabs
      v-model="activeName"
      class="flex-1 nav_tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="item in tabList"
        :key="item.id"
        :name="item.id+''"
      >
        <p
          slot="label"
          class="text-center"
          style="line-height:20px;"
        ><span>{{ item.name }}</span><br><span>({{ item.title }})</span></p>
      </el-tab-pane>
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="common_form_search">
        <el-form
          :inline="true"
          :model="searchForm"
        >
          <el-form-item label="商品名称">
            <el-input
              v-model="searchForm.goodsName"
              placeholder="请输入商品名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="供应商">
            <el-input
              v-model="searchForm.shopName"
              placeholder="请输入供应商"
              clearable
            />
          </el-form-item>
          <el-form-item label="商品品类">
            <el-select
              v-model="searchForm.categoryId"
              placeholder="请选择商品品类"
              clearable
            >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="searchForm.status"
              placeholder="全部"
              clearable
            >
              <el-option
                label="上架推广"
                value="2"
              />
              <el-option
                label="下架推广"
                value="1"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="search()"
            >查询</el-button>
            <el-button
              size="small"
              @click="reset()"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div style="padding:0 30px">
        <div class="flex align-center table-top-btns">
          <h5 class="flex align-center">
            <svg-icon
              style="margin-right:15px"
              icon-class="list"
              :size="15"
            />数据列表
          </h5>
          <el-button
            v-if="$hasMethod('#add')"
            size="small"
            class="add-btn"
            icon="el-icon-plus"
            @click="openAdd()"
          >添加商品</el-button>
        </div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            label="排序"
            width="80"
          >
            <template slot-scope="scope">
              <span v-if="!$hasMethod('#sort')">{{ scope.row.sort }}</span>
              <el-input
                v-else
                v-model="scope.row.sort"
                oninput="value=value.replace(/[^\d]/g,'')"
                max-length="9"
                @change="changeSort(scope.row.id, scope.row.sort)"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="商品信息"
            width="500"
          >
            <template slot-scope="scope">
              <div class="flex">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="scope.row.imgurl?$globalObj.imgBaseUrl+scope.row.imgurl:''"
                >
                  <div
                    slot="error"
                    class="image-slot"
                  >
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <div
                  class="flex-1 text-left"
                  style="padding-left:15px;"
                >
                  <p class="color-999">{{ scope.row.goods_id }}</p>
                  <p class="blue-font">{{ scope.row.title }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="category_name"
            label="品类"
            align="center"
          />
          <el-table-column
            prop="shelves_time"
            label="上架时间"
            align="center"
            width="100"
          />
          <el-table-column
            prop="shopname"
            label="供应商"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-if="$hasMethod('#enable')"
                type="warning"
                size="mini"
                @click="changeStatus(scope.row.id, scope.row.status)"
              >{{ scope.row.status==2?'下架推广':'上架推广' }}</el-button>
              <el-button
                v-if="$hasMethod('#delete') && scope.row.status==2"
                type="danger"
                size="mini"
                @click="deleteRow(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <custom-page
          ref="customPage"
          :total="total"
          @getList="getList"
        />
      </div>
    </div>
    <goods-dialog
      ref="goodsDialog"
      :cate-id="activeName"
      @getList="getList"
    />
  </div>
</template>

<script>
import { listCategoryList, setListSort, goodsList, setListStatus, deleteListItem } from '@/api/xcx'
import { getCategory } from '@/api/audit'
import customPage from '@/components/customPage'
import goodsDialog from './goods'
export default {
  components: { customPage, goodsDialog },
  data() {
    return {
      searchForm: {
        goodsName: '',
        shopName: '',
        categoryId: '',
        status: ''
      },
      activeName: '',
      total: 0,
      tableData: [],
      tabList: [],
      categoryList: []
    }
  },
  mounted() {
    this.getClassify()
    this.getSelectList()
  },
  methods: {
    // 删除
    deleteRow(id) {
      this.$confirm('您确定要删除推广吗？', '删除推广', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteListItem({
          id
        }).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    // 上架/下架推广
    changeStatus(id, status) {
      let tip = ''; let title = ''
      if (status == 2) {
        tip = '您确定要下架推广吗？'
        title = '下架推广'
      } else {
        tip = '您确定要上架推广吗？'
        title = '上架推广'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        setListStatus({
          id,
          status: status == 2 ? 1 : 2
        }).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    // 更改排序
    changeSort(id, val) {
      setListSort({
        id: id,
        sort: val
      }).then(res => {
        this.getList(true)
      })
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      goodsList({
        page,
        pageSize,
        listCateId: this.activeName,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
      })
    },
    getClassify() {
      listCategoryList().then(res => {
        this.tabList = res || []
        this.activeName = this.tabList[0] ? this.tabList[0].id + '' : ''
        this.getList()
      })
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        goodsName: '',
        shopName: '',
        categoryId: '',
        status: ''
      }
      this.$refs.customPage.page = 1
      this.getList()
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.reset()
    },
    getSelectList() {
      getCategory().then(res => {
        this.categoryList = res || []
      })
    },
    openAdd() {
      this.$refs.goodsDialog.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.common_form_search {
  padding: 15px 30px 0;
}
.child_page {
  padding-bottom: 15px;
}
.nav_tabs {
  padding-top: 15px;
}
</style>
